<!-- 功能：统一管理 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月30日 11:46:56 -->
<template>
  <a-layout class="y-layout">
    <topHeader></topHeader>
    <a-layout-content class="y-layout-content">
      <a-row :gutter="20">
        <a-col :span="18">
          <a-card>
            <a-button type="link" class="y-btn" @click="openTianJiaGuanLiDiZhiModal">
              <template #icon>
                <plus-outlined />
              </template>
              添加管理地址
            </a-button>
            <!-- 弹窗 - 添加管理地址 -->
            <tianJiaGuanLiDiZhiModal v-model:visible="visibleTianJiaGuanLiDiZhiModal"></tianJiaGuanLiDiZhiModal>
            <a-alert banner message="说明:  没有其他可以管理的服务器，点击‘添加管理地址’按钮添加服务器！" type="warning" show-icon />
          </a-card>

        </a-col>
        <a-col :span="6">
          <a-card>
            <a-descriptions title="列阵状态" bordered size="small" :column="2">
              <a-descriptions-item>
                <a-image :width="20" :src="okPng" :preview="false" />
              </a-descriptions-item>
              <a-descriptions-item>正常</a-descriptions-item>
              <a-descriptions-item>
                <a-image :width="20" :src="alertPng" :preview="false" />
              </a-descriptions-item>
              <a-descriptions-item>阵列存在故障</a-descriptions-item>
              <a-descriptions-item>
                <a-image :width="20" :src="errorPng" :preview="false" />
              </a-descriptions-item>
              <a-descriptions-item>网路无法连接</a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>

    </a-layout-content>
  </a-layout>
</template>

<script setup>
import alertPng from '@/assets/images/tongYiGuanLi/alert.png'
import errorPng from '@/assets/images/tongYiGuanLi/error.png'
import okPng from '@/assets/images/tongYiGuanLi/ok.png'
import tianJiaGuanLiDiZhiModal from './modal/tianJiaGuanLiDiZhiModal.vue'

const visibleTianJiaGuanLiDiZhiModal = ref(false)

const openTianJiaGuanLiDiZhiModal = () => {
  visibleTianJiaGuanLiDiZhiModal.value = true
}
</script>

<style scoped lang='scss'>
.ant-alert {
  margin: 10px 0;
}
</style>